<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>假果酱后台</title>
    <link href="/tencent/css/bootstrap.min.css" rel="stylesheet">
    <link href="/tencent/font-awesome/css/font-awesome.css" rel="stylesheet">
    <link href="/tencent/css/plugins/blueimp/css/blueimp-gallery.min.css" rel="stylesheet">
    <link href="/tencent/css/animate.css" rel="stylesheet">
    <link href="/tencent/css/style.css" rel="stylesheet">
</head>

<body>
    <input hidden id="limit" value="2"/>
    <input hidden id="skip" value="0"/>
    <input hidden id="totalSize" value=""/>
    <div id="wrapper">

        <nav class="navbar-default navbar-static-side" role="navigation">
            <div class="sidebar-collapse">
                <ul class="nav metismenu" id="side-menu">
                    <li class="nav-header">
                        <div class="dropdown profile-element"> <span>
                            <img alt="image" class="img-circle" src="/tencent/img/logo1.png" width="48px" height="48px"/>
                             </span>
                            <a data-toggle="dropdown" class="dropdown-toggle" href="#">
                            <span class="clear"> <span class="block m-t-xs"> <strong class="font-bold">欢迎大佬</strong>
                             </span> <span class="text-muted text-xs block">常用操作 <b class="caret"></b></span> </span> </a>
                            <ul class="dropdown-menu animated fadeInRight m-t-xs">
                                <li><a href="/tencent/fireIndex/index">返回首页</a></li>
                                <li><a href="/tencent/fireIndex/lookAllUser">查看所有用户信息</a></li>
                                <li><a href="">你看不见我</a></li>
                                <li class="divider"></li>
                                <li><a href="/tencent/fireIndex/login">Logout</a></li>
                            </ul>
                        </div>
                        <div class="logo-element">
                            IN+
                        </div>
                    </li>
                    <li class="active">
                        <a href="/tencent/fireIndex/index"><i class="fa fa-database"></i> <span class="nav-label">功能模块</span> <span class="fa arrow"></span></a>
                        <ul class="nav nav-second-level collapse">
                            <li><a href="/tencent/fireIndex/index"><i class="fa fa-th-large"></i>主页</a></li>
                            <li class="active"><a href="/tencent/fireIndex/basic_gallery"><i class="fa fa-picture-o"></i>画廊</a></li>
                            <li><a href="/tencent/fireIndex/lookAllUser"><i class="fa fa-star"></i>用户信息</a></li>
                            <li><a href="/tencent/fireIndex/pin_board"><i class="fa fa-edit"></i>公告</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
        </nav>

        <div id="page-wrapper" class="gray-bg">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header">
                    <a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
                    <form role="search" class="navbar-form-custom" action="search_results.html">
                        <div class="form-group">
                            <input type="text" placeholder="Search for something..." class="form-control" name="top-search" id="top-search">
                        </div>
                    </form>
                </div>
                <ul class="nav navbar-top-links navbar-right">
                    <li>
                        <span class="m-r-sm text-muted welcome-message">欢迎进入假果酱后台</span>
                    </li>



                    <li>
                        <a href="/tencent/fireIndex/login">
                            <i class="fa fa-sign-out"></i> Log out
                        </a>
                    </li>
                </ul>

            </nav>
        </div>
            <div class="row wrapper border-bottom white-bg page-heading">
                <div class="col-lg-10">
                    <h2>画廊</h2>
                    <ol class="breadcrumb">
                        <li>
                            <a href="index.html">主页</a>
                        </li>
                        <li>
                            <a>画廊</a>
                        </li>
                        <li class="active">
                            <strong>Lightbox Gallery</strong>
                        </li>
                    </ol>
                </div>
                <div class="col-lg-2">

                </div>
            </div>

            <script>
                function  reloadAllPicture() {
                    var totalSize = document.getElementById("totalSize").value;
                    $.post("/tencent/fire/reloadPicture",{limit:totalSize,skip:1},function (data) {
                        if(data.code==0){
                            var allcontent = "";
                            var list = data.data.list;
                            for(var i = 0; i<list.length;i++){
                                if(list[i].ImgUrl!=null){
                                    var content ='   <a href="'+list[i].ImgUrl+'" title="'+list[i].type+'" data-gallery=""><img src="'+list[i].ImgUrl+'" width="100px" height="100px"></a>';
                                    var allcontent = allcontent + content;
                                }
                            }
                            document.getElementById("skip").value = totalSize;
                            document.getElementById("userAllPicture").innerHTML= allcontent;
                        }
                    });
                }
            </script>
        <div class="wrapper wrapper-content">
            <div class="row">
                <div class="col-lg-12">
                <div class="ibox float-e-margins">

                    <div class="ibox-content">

                        <h2>画廊</h2>
                        <p>
                            <strong>用户上传的所有图像:</strong>
                            该画廊的图像全都是用户自己上传识别，软件不负责所有的肖像权和图像版权，仅用展示， <strong>爱咋咋地</strong>
                            画廊默认为<strong>懒加载</strong>(自己模拟的)。需要一次性加载点击这里
                            <button type="button" class="btn btn-danger popover-toggle  btn-sm" onclick="reloadAllPicture();"
                                                        title="老子跟你讲" data-container="body"
                                                        data-toggle="popover" data-placement="right"
                                                        data-content="带宽多少我希望你心里有点B数">
                            点击加载全部
                        </button>
                        </p>

                        <div class="lightBoxGallery">
                            <div id="userAllPicture">
                            </div>

                            <!-- The Gallery as lightbox dialog, should be a child element of the document body -->
                            <div id="blueimp-gallery" class="blueimp-gallery">
                                <div class="slides"></div>
                                <h3 class="title"></h3>
                                <a class="prev">‹</a>
                                <a class="next">›</a>
                                <a class="close">×</a>
                                <a class="play-pause"></a>
                                <ol class="indicator"></ol>
                            </div>

                        </div>

                    </div>
                </div>
            </div>

            </div>
        </div>
        <div class="footer">
            <div class="pull-right">
                Copyright @假果酱
            </div>
            <div>
                © 2018 - no money pay for aliyun
            </div>
        </div>
        </div>
        </div>

    <!-- Mainly scripts -->
    <script src="/tencent/js/jquery-2.1.1.js"></script>
    <script src="/tencent/js/bootstrap.min.js"></script>
    <script src="/tencent/js/plugins/metisMenu/jquery.metisMenu.js"></script>
    <script src="/tencent/js/plugins/slimscroll/jquery.slimscroll.min.js"></script>
    <!-- Custom and plugin javascript -->
    <script src="/tencent/js/inspinia.js"></script>
    <script src="/tencent/js/plugins/pace/pace.min.js"></script>

    <!-- blueimp gallery -->
    <script src="/tencent/js/plugins/blueimp/jquery.blueimp-gallery.min.js"></script>

    <style>
        /* Local style for demo purpose */

        .lightBoxGallery {
            text-align: center;
        }

        .lightBoxGallery img {
            margin: 5px;
        }

    </style>

</body>
<script>
    window.onload=function (ev) {
        function reloadPicture() {
            var limit = document.getElementById("limit").value;
            var skip = document.getElementById("skip").value;
            $.post("/tencent/fire/reloadPicture",{limit:limit,skip:skip},function (data) {
                if(data.code==0){
                    var allcontent = "";
                    var list = data.data.list;
                    for(var i = 0; i<list.length;i++){
                        if(list[i].ImgUrl!=null){
                            var content ='   <a href="'+list[i].ImgUrl+'" title="'+list[i].type+'" data-gallery=""><img src="'+list[i].ImgUrl+'" width="100px" height="100px"></a>';
                            var allcontent = allcontent + content;
                        }
                    }
                    var before = document.getElementById("userAllPicture").innerHTML;
                    document.getElementById("skip").value = (skip-0)+(limit-0);
                    document.getElementById("totalSize").value =data.data.totalSize;
                    document.getElementById("userAllPicture").innerHTML= before+allcontent;
                    if(skip-0>=data.data.totalSize-0){
                        window.clearTimeout(timeid);
                    }
                }

            });
        }
        var timeid = window.setInterval(reloadPicture,"1500");
    }


</script>


</html>
